<template>
    <page-wrapper>
        <table-search :isSearch="false">
            <template #extra>
                <a-space>
                    <a-button type="primary" @click="pickItem(null)"><plus-outlined />新增菜单</a-button>
                </a-space>
            </template>
        </table-search>
        <a-table :columns="columns" bordered :loading="loading" :dataSource="list" rowKey="id" :scroll="{ x: 800 }"
            :pagination="pagination" :row-selection="selection">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key == 'icon'">
                    <svg-icon className="svg_icon" v-if="record.icon" :icon="record.icon" />
                </template>
                <template v-else-if="column.key == 'type'">
                    <DictTag :list="dicts.menu_type" :value="record.type" />
                </template>
                <template v-else-if="column.key == 'show'">
                    <a-tag>{{ record.show?'显示':'隐藏' }}</a-tag>
                </template>
                <template v-else-if="column.key == 'extend'">
                    <a-tag>{{ record.extend?'跳出':'不跳出' }}</a-tag>
                </template>
                <template v-else-if="column.key == 'path'">
                    <span v-if="record.type!='F'">{{ record.path }}</span>
                </template>
                <template v-else-if="column.key == 'permission'">
                    <span v-if="record.type=='F'">{{ record.path }}</span>
                </template>
                <template v-else-if="column.key == 'action'">
                    <a-space>
                        <a-button size="small" type="primary" block @click="pickItem(record)">编辑</a-button>
                        <a-button size="small" type="primary" danger block
                            @click="removeItem(record, remove, deleteMsg, 'id')">删除</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>

        <template v-if="showInfo">
            <ItemInfo :type="dicts.menu_type" :info="showItem" @cancel="close" @submit="search(1)" />
        </template>
        <!-- <DictTag :list="dicts?.user_status" value="01" /> -->
    </page-wrapper>
</template>
<script setup lang="ts">
import { columns } from './columns';
import { useTable } from '@/hooks/use-table';
import { remoteList,remove } from '@/api/system/menu/index'
import ItemInfo from './components/info.vue'

let deleteMsg = '确定要删除该菜单？';

let {
    list,
    loading,
    showItem,
    showInfo,
    pagination,
    selection,
    search,
    // reset,
    removeItem,
    pickItem,
    close
} = useTable(remoteList, {page:1,size:10});
// search(0);
import { useDicts } from '@/hooks/use-dicts/index'
let { dicts } = useDicts(['menu_type']);
</script>
<style lang="scss" scoped>
.svg_icon{
    font-size: 18px;
}
</style>